<template>
  <el-dialog v-model="showDialog"
             :title="title"
             :draggable="true"
             :destroy-on-close="true"
             :close-on-click-modal="false"
             @open="openDialog"
             @opened="openedDialog"
             @close="closeDialog(roleSaveItemRef)"
             @closed="closedDialog"
  >
    <el-form
        :model="roleSaveItem"
        :rules="roleSaveItemRules"
        ref="roleSaveItemRef"
        label-suffix=":"
        label-width="100px"
        status-icon
    >
      <el-form-item label="角色名" prop="roleName">
        <el-input v-model="roleSaveItem.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色类型" prop="roleType">
        <el-select v-model="roleSaveItem.roleType">
          <el-option v-for="item in roleTypeData" :label="item.label" :value="item.value"
                     :key="item.key || item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="说明" prop="description">
        <el-input v-model="roleSaveItem.description"></el-input>
      </el-form-item>
    </el-form>

    <template #footer >
      <el-button type="primary" @click="confirm(roleSaveItemRef)" :loading="confirmLoading">保存</el-button>
      <el-button type="danger" @click="closeDialog(roleSaveItemRef)">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {DIALOG_EDIT, DIALOG_VIEW} from "@/constants/common-constant.ts";
import {reactive, ref, watch} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import {dictDataUtil} from "@/utils/common-request.ts";
import {SYSTEM_ROLE_TYPE} from "@/constants/dict-constants.ts";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import {saveRoleReq} from "@/api/admin/role.ts";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: DIALOG_VIEW
  },
  dialogParam: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['openDialog', 'openedDialog', 'closeDialog', 'closedDialog'])

const showDialog = ref(props.showDialog)

watch(() => props.showDialog, (val: boolean) => {
  showDialog.value = val
})

interface RoleSaveItem {
  id: string;
  roleName: string;
  roleType: string;
  description: string;
}

const roleSaveItem = reactive<RoleSaveItem>({
  id: '',
  roleName: '',
  roleType: '',
  description: ''
})

const roleSaveItemRules = reactive<FormRules<RoleSaveItem>>({
  roleName: [
    {required: true, message: '请输入角色名', trigger: 'blur'},
  ],
  roleType: [
    {required: true, message: '请选择角色类型', trigger: 'blur'},
  ]
})

const roleSaveItemRef = ref<FormInstance>();

const roleTypeData = ref<any>([]);

const confirmLoading = ref<boolean>(false)

const initModuleData = async () => {
  roleTypeData.value = await dictDataUtil(SYSTEM_ROLE_TYPE)
}

const initFormData = () => {
  roleSaveItem.id = props.dialogParam.id
  roleSaveItem.roleName = props.dialogParam.roleName
  roleSaveItem.roleType = props.dialogParam.roleType
  roleSaveItem.description = props.dialogParam.description
}

const openDialog = () => {
  emits('openDialog')
}

const openedDialog = () => {
  emits('openedDialog')
  initModuleData()
  if (props.dialogType === DIALOG_EDIT) {
    initFormData()
  }
}

const closeDialog = (formEl: FormInstance | undefined) => {
  resetFiled(formEl)
  emits('closeDialog')
}

const closedDialog = () => {
  emits('closedDialog', false)
}

const confirm = async (formEl: FormInstance | undefined) => {
  if(!formEl) return
  await formEl.validate((valid, fields) => {
    if (!valid){
      warningMessageTip("请填写完整信息")
      return;
    } else {
      commonConform(formEl)
    }
  })

}

const commonConform = async (formEl: FormInstance | undefined) => {
  confirmLoading.value = true
  const params = {
    id: props.dialogParam.id,
    roleName: roleSaveItem.roleName,
    roleType: roleSaveItem.roleType,
    description: roleSaveItem.description
  }
  const res:any = await saveRoleReq(params)
  elMessageTip(res.tipType, res.message)
  confirmLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS) {
    closeDialog(formEl)
  }
}
const resetFiled = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>

</style>